<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统会员</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
		<!--搜索开始-->
        <fieldset class="layui-elem-field layuimini-search">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="searchFrm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">会员名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">会员手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phone" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <a class="layui-btn " lay-submit=""  lay-filter="data-search-btn"><label class="layui-icon layui-icon-search"></label>搜索</a>
							<a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                        </div>
                    </div>

                </form>
            </div>
        </fieldset>
		<!--搜索结束-->
		
		<!--表格开始-->
        <table class="layui-hide" id="MemberTable" lay-filter="MemberTable"></table>
        <script type="text/html" id="MemberToolBar">
            <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
            <!-- <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="batchdelete">批量删除</a> -->
        </script>
		<script type="text/html" id="MemberTableBar">
            <a class="layui-btn layui-btn-sm layui-btn-warm data-count-delete" lay-event="update">修改</a>
		    <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="delete">删除</a>
            <!-- <a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete" lay-event="selectMenu">分配权限</a> -->
		</script>

        <script type="text/html" id="availableTpl">
            <!-- 这里的 checked 的状态只是演示
            <input type="checkbox" name="available" value="{{d.id}}" lay-skin="switch" lay-text="可用|不可用" lay-filter="availableSwitch" {{ d.available == 1 ? 'checked' : '' }}>
          </script> -->
		
		<!--表格结束-->

        <!-- 添加和修改的弹出层开始 -->
        <div id ="addOrUpdateDiv" style="display: none;padding: 5px;">
            <form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
                <div class="layui-form-item">
                    <label class="layui-form-label">会员ID</label>
                    <div class="layui-input-block">
                        <input placeholder="请输入会员ID" lay-verify="required" name="cardid" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">会员姓名</label>
                    <div class="layui-input-block">
                        <!-- <input type="hidden" name="id"> -->
                        <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="输入会员姓名" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">会员手机号</label>
                    <div class="layui-input-block">
                        <input placeholder="请输入会员手机号" lay-verify="required" name="phone" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-block" style="text-align: center;">
                        <a class="layui-btn " lay-submit=""  lay-filter="doSubmit"><label class="layui-icon layui-icon-release"></label>提交</a>
                        <a class="layui-btn layui-btn-warm" onclick="javascript:$('#dataFrm')[0].reset()" lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                    </div>
                </div>
            </form>
        </div>
        <!-- 添加和修改的弹出层结束 -->

        <!-- 选择菜单和修改的弹出层开始-->
        <div id="selectMenuDiv" style="display: none;padding: 5px;">

            <table class="layui-hide" id="menuTable" lay-filter="menuTable"></table>
        </div>
        <!-- 选择菜单和修改的弹出层结束-->

        <!-- 查看会员开始 -->
        <!-- <div id="showMemberDiv" style="display: none;padding: 5px;">
            <h2 align="center" id="show_title"></h2>
            <hr>
            <div style="float: right;">
                发布人：<span id="show_opername"></span><span style="display: inline-block; width: 10px;"></span>
                发布时间：<span id="show_createtime"></span>
            </div>
            <hr>
            <div id="show_content"></div>
        </div> -->
        <!-- 查看会员结束 -->

    </div>
</div>
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table','laydate','layer'], function () {
        var form = layui.form;
        var table = layui.table;
		var laydate=layui.laydate;
		var layer=layui.layer;

      var tableIns=table.render({
            elem: '#MemberTable',
            url: api+'member/loadAllMember',
			toolbar:"#MemberToolBar",
            height:'full-200',
			cellMinWidth:true,
            cols: [[
                {field: 'cardid', title: '会员ID', align: "center"},
                {field: 'name',  title: '会员名称', align: "center"},                
                {field: 'phone',  title: '会员手机号', align: "center"},
                {field: 'registrationtime',  title: '注册时间', align: "center"},
                {title: '操作', templet: '#MemberTableBar', fixed: "right", align: "center"}
            ]],
            // where:cols,
            page: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
			var params= $("#searchFrm").serialize()
            //执行搜索重载
            table.reload('MemberTable', {
                page: {
                    curr: 1
                }
                ,url:api+'member/loadAllMember?'+params
            });
            return false;
        });

		//监听表头的事件
		table.on('toolbar(MemberTable)', function(obj){
            //判断点击的按钮id
		  var checkStatus = table.checkStatus(obj.config.id);
		  switch(obj.event){
		    case 'batchdelete':
                batchdelete();
		    break;
            case 'add':
                openAddMember();
		    break;
		  };
		});
		
		//监听行数据的事件
        table.on('tool(MemberTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                layer.confirm('真的删除['+data.name+']这个会员么', function (index) {
					$.post(api+"member/deleteMember",{id:data.cardid},function(res){
						layer.msg(res.msg);
						obj.del();
						layer.close(index);
					})
                });
            }else if(obj.event === 'update'){
                openUpdateMember(data);
            }
        });


        //打开添加会员的弹层
        var mainIndex;
        var url;
        function openAddMember(){
             mainIndex=layer.open({
                 type:1,
                 title:'添加会员',
                 content:$("#addOrUpdateDiv"),
                 area:['400px','300px'],
                 success:function(index){
                     url=api+"member/addMember";
                     //重置表单
                     $("#dataFrm")[0].reset();
                 }
             });
        }
        function openUpdateMember(data){
             mainIndex=layer.open({
                 type:1,
                 title:'修改['+data.name+']会员',
                 content:$("#addOrUpdateDiv"),
                 area:['400px','300px'],
                 success:function(index){
                     url=api+"member/updateMember";
                     //装载数据表格
                     form.val("dataFrm",data);
                 }
             });
        }

        //提交数据
        form.on("submit(doSubmit)",function(data){
            var params = $("#dataFrm").serialize();
            $.post(url,params,function(res){
                layer.msg(res.msg);
                if(res.code==200){
                    tableIns.reload();
                }
                layer.close(mainIndex);
            })
            return false;
        })

        //监听可用操作'switch(availableSwitch)'
        form.on(function(obj){
        $.post(api+"member/updateMember",{cardid:this.value},function(res){
            layer.msg(res.msg);
            tableIns.reload();
        })
        });

        // //打开选择菜单和权限的弹出层
        // function openSelectMenu(data_table){
        //     var table_MenusIns;
        //     mainIndex=layer.open({
        //          type:1,
        //          title:'分配['+data_table.name+']会员和权限和菜单',
        //          content:$("#selectMenuDiv"),
        //          area:['800px','600px'],
        //          btn:['<span class="layui-icon layui-icon-ok">确认分配</span>'],
        //          btnAlign:'c',
        //          yes:function(){
        //             var m = table_MenusIns.checkStatus();
        //             var rid = data_table.id;
        //             var params = "rid="+rid;
        //             $.each(m,function(x,item){
        //                 params+="&mids="+item.id;
        //             });
        //             $.post(api+"member/saveMemberMenu",params,function(res){
        //                 layer.msg(res.msg);
        //             })
        //             layer.close(mainIndex)
        //          },
        //          success:function(index){
        //             table_MenusIns=treeTable.render({
        //                 tree: {
        //                     iconIndex: 2,  // 折叠图标显示在第几列
        //                     idName: 'id',  // 自定义id字段的名称
        //                     pidName: 'pid',  // 自定义标识是否还有子节点的字段名称
        //                     isPidData: true,  // 是否是pid形式数据
        //                     openName: 'spread'
        //                 },
        //                 elem: '#menuTable',
        //                 cellMinWidth:true,
        //                 cols: [
        //                     {type: "checkbox"},
        //                     {field: 'title',  title: '菜单或权限名称'},
        //                     {field: 'id', title: 'ID'},
        //                     {field: 'type',  title: '类型', align: "center",templet:function(d){
        //                         if(d.type == 'topmenu'){
        //                             return '<span class="layui-badge layui-bg-red">顶部菜单</span>';
        //                         }
        //                         if(d.type == 'leftmenuu'){
        //                             return '<span class="layui-badge layui-bg-blue">左侧菜单</span>';
        //                         }
        //                         else{
        //                             return '<span class="layui-badge layui-bg-grey">权限</span>';
        //                         }
        //                     }}
        //                 ],
        //                 reqData: function(data, callback) {
        //                     if(data==undefined){
        //                         // 在这里写ajax请求，通过callback方法回调数据
        //                         $.get(api+'menu/loadAllMenu?available=1', function (res) {
        //                             callback(res.data);  // 参数是数组类型
        //                             //选择已选中的权限或菜单
        //                             $.get(api+"Member/queryMenuIdsByRid",{id:data_table.id},function(rs){
        //                                 var x = new Array();
        //                                 //双循环判断当前会员的菜单是否是子节点菜单，不是不选中
        //                                 $.each(res.data,function(i,i_1){
        //                                     $.each(rs.data,function(j,j_1){
        //                                         if(i_1.id == j_1){
        //                                             if(!i_1.children){
        //                                                 x.push(j_1);
        //                                             }
        //                                         }
        //                                     })
        //                                 })
        //                                 table_MenusIns.setChecked(x);//选中当前表格数据
        //                             });

        //                         });
        //                     }else{
        //                         callback([]);//回调一个空数据去渲染表格
        //                     }
        //                 }
        //             });
        //         }
        //     });
        // }


        //批量删除
        // function batchdelete(){
        //     var checkStatus = table.checkStatus('MemberTable'); //idTest 即为基础参数 id 对应的值
		// 		var data=checkStatus.data;
		// 		var length=checkStatus.data.length;
		// 		console.log(checkStatus.data) //获取选中行的数据
		// 		console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
		// 		if(length==0){
		// 			layer.msg("请选中要删除的行数据");
		// 		}else{
		// 			layer.confirm('真的删除选择中这些数据么?', function (index) {
		// 				var params="";
		// 				$.each(data,function(index,item){
		// 					if(index==0){
		// 						params+="ids="+item.id;
		// 					}else{
		// 						params+="&ids="+item.id;
		// 					}
		// 				});
		// 				$.post(api+"member/batchDeleteMember",params,function(res){
		// 					layer.msg(res.msg);
		// 					tableIns.reload();
		// 					layer.close(index);
		// 				})
		// 			});
		//         }
		//         //layer.msg('批量删除');
        // }


    });
</script>
<script>

</script>

</body>
</html>